.layoutModalWrapper {
    padding: 16px 28px;
    > p {
        margin-bottom: 0;
    }
    .userFuncModule {
        display: flex;
        align-items: stretch;
        .leftFuncModule {
            width: 522px;
            margin-right: 11px;
        }
        .rightFuncModule {
            width: 262px;
            flex-grow: 1.5;
        }
        .leftFuncModule,
        .rightFuncModule {
            > div {
                height: 100%;
                max-height: 305px;
                overflow-y: auto;
                overflow-x: hidden;
            }
        }
    }
    .sortableItem {
        padding: 15px;
        font-size: 16px;
        border: 1px solid #ededed;
        border-radius: 4px;
        margin: 16px 5px 16px 0;
        background: white;
        cursor: move;
        display: flex;
        opacity: 1;
        > span {
            flex: 1;
        }
        &:global {
            &.sortable-ghost {
                color: rgba(0, 0, 0, 0.25);
                background: #f2f3f4;
                border: 1px solid rgba(0, 0, 0, 0.05);
            }
        }
    }
    .disabled {
        color: rgba(0, 0, 0, 0.25);
        cursor: not-allowed;
    }
    .otherFuncModuleWrapper {
        position: relative;
        padding: 16px 8px;
        margin-top: 16px;
        min-height: 102px;
        background: #fafafa;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        > p {
            margin-bottom: 5px;
            margin-left: 8px;
        }

        .otherFuncModule {
            display: flex;
            justify-content: stretch;
            &::after {
                content: '';
                display: block;
            }
            .sortableItem {
                width: 244px;
                cursor: default;
                margin: 8px;
            }
        }
    }
}

.emptyDataSource {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    margin: 0;
}

.layoutSortable {
    background: width;
}
